<template>
	<view class="page">
		<view class="cover" @click="hideMask()"  v-if ="istan">
			<image src="/static/img/fshare.png" ></image>
		</view>
		<image src="/static/img/share-app.png" class="share"></image>
		<view class="share-to-wrap">
			<text class="share-to">分享到</text>
			<image src="/static/img/wechat.png" class="wechat"  @click="shareFriend()" ></image>
			<image src="/static/img/friend.png" class="friend"  @click="shareFriendcricle()"></image>
			<image src="/static/img/photo.png"  class="photo" @click="saveImgToLocal"></image>
			<text class="to-friend" @click="shareFriend()">微信好友</text>
			<text class="to-friend-circle" @click="shareFriendcricle()">微信朋友圈</text>
			<text class="to-photo" @click="saveImgToLocal">保存到相册</text>
			<!-- <text class="to-photo"><a :href="shareimgurl" download="img">保存到相册</a></text> -->
			<!-- <a href="img/photo.jpg" download="img">下载图片</a> -->
			
		</view>
	</view>
</template>

<!-- <script  src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script>
	
	
	
	// import {wx} from "@/common/wxshare.js"
	import ComHeader from '@/components/ComHeader';
	export default {
		onLoad: function(options) {
			
			//调用需要的方法 保存图片
			this.sharImg();
			//请求分享参数
			this.getSignParam()
			// this.saveImgToLocal();
		},
		
		data() {
			return {
				shareimgurl:'',
				shareParam:'',
				title:"'云盟商桥'引导时尚新主流",
				desc:"下载'云盟商桥'APP尽享超值特惠",
			
				url:'http://yun.youpilive.com/share/index/index',
				imgUrl:'http://myun.youpilive.com/static/img/logo.png',
			
				istan:false
			}
		},
		components: {
			ComHeader
		},
		methods:{
			//弹窗图片 消失
			hideMask(){
				this.istan = false
			},
			//请求分享参数签名
			getSignParam(){
				var t=this;//http://yun.youpilive.com/share/index/index
				//分享参数头url
				let shareurl = this.$api.headurl
				this.$api.getShareParam({url:shareurl+'/#/pages/my/ShareApp'}).then(res => {
					if(res.data.status == true){
							
							t.$wx.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId:res.data.data.appId, // 必填，公众号的唯一标识
								timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
								signature: res.data.data.signature,// 必填，签名
								
								jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] ,// 必填，需要使用的JS接口列表
							
							
							/* 即将废弃	jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填，需要使用的JS接口列表 */
							})
							t.$wx.ready(function () {
								//需在用户可能点击分享按钮前就先调用
								t.$wx.updateAppMessageShareData({ 
									title:t.title, // 分享标题
									desc: t.desc, // 分享描述
									link:t.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl:t.imgUrl, // 分享图标
									success: function () {
										this.istan = true
										// alert("请点击右上角分享给朋友")
									  // 设置成功
									},
									fail: function (res) {
										// alert("分享失败")
									},
									cancel : function() {
									 // 用户取消分享后执行的回调函数
									 
									}
								});
							
							});
							
							t.$wx.ready(function () {
								//需在用户可能点击分享按钮前就先调用
								t.$wx.updateTimelineShareData({
									title:t.title, // 分享标题
									desc: t.desc, // 分享描述
									link:t.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl:t.imgUrl, // 分享图标
									success: function (res) {	
										this.istan = true
											
									  // 设置成功
									},
									fail: function (res) {
										// alert("分享失败")
									},
									cancel : function() {
									 // 用户取消分享后执行的回调函数	 
									}
								})
							});
					
					}
					
				})
				
			},
			shareFriend() {
				this.istan = true
				// alert("请点击右上角分享给朋友")
			},
			//	分享到朋友圈
		    shareFriendcricle() {
				this.istan = true
			// alert("请点击右上角分享给朋友圈")
				
			},
			sharImg(){
				var t=this;
				this.$api.getSareImgurl().then(res => {
					console.log(res)
					if(res.data.status == true){
						
						t.imgurl = res.data.img
					
					}
					
				})
				
			},
			//保存到相册
			saveImgToLocal:function(e){
				uni.showToast({
				   title:'长按图片即可保存！' ,	
				   icon:'none',
				   duration:1000
				})
				/* var FileSaver = require('file-saver');
				var t=this;
				var triggerEvent = "touchstart";  //指定下载方式
				this.$api.getSareImgurl().then(res => {
					console.log(res)
					if(res.data.status == true){
						
						let Url = res.data.img
					
						// console.log(Url,'__________d地址——————————————')
						// alert(Url)
						// var name = (new Date()).valueOf();
						// alert(name)
						// FileSaver.saveAs('http://test.8a1.top/static/img/44.png',name+'.png')
						
						var blob = new Blob([''], { type: 'application/octet-stream' });
						var url = URL.createObjectURL(blob);
						var a = document.createElement('a');
						a.href = Url;
						a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
						var e = document.createEvent('MouseEvents');
						e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
						a.dispatchEvent(e);
						URL.revokeObjectURL(url);
						setTimeout(function(){
							uni.showToast({
								 title: '保存成功', 
								// duration: 1500  
							}); 
						},1000)
					
					

					
					}
					
				}) */

			
			            
				
			                
			},
			
				
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh (--status-bar-height) ;
		padding-top: (--status-bar-height);
	}
	.share {
		width: 610rpx;
		height: 950rpx;
		margin-top: 55rpx;
		margin-left: 70rpx;
	}
	.share-to-wrap {
		width: 650rpx;
		height: 289rpx;
		margin-left: 50rpx;
		margin-top: 50rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 6rpx 21rpx 0rpx rgba(174,174,174,0.29);
		border-radius: 30rpx;
		overflow: auto;
	}
	.share-to {
		display: block;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		margin-left: 273rpx;
		margin-top: 54rpx;
	}
	.wechat {
		width: 68rpx;
		height: 57rpx;
		margin-left: 72rpx;
		margin-top: 50rpx;
	}
	.friend {
		width: 64rpx;
		height: 64rpx;
		margin-left: 153rpx;
	}
	.photo {
		width: 62rpx;
		height: 62rpx;
		margin-left: 156rpx;
	}
	.to-friend {
		display: inline-block;
		margin-left: 51rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.to-friend-circle {
		display: inline-block;
		margin-left: 94rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.to-photo {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 82rpx;
	}
	.cover {
	position:fixed;
	left:0;
	top:0;
	opacity:.5;
	width:100%;
	height:100%;
	background:#000;
	z-index:998;
	/* pointer-events: none; //不能操作 */
	}
</style>
